<!DOCTYPE html>
<html>
<head>
    <title>聚合demo--2</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
    <link rel="stylesheet" href="./css/smoothness/jquery-ui-1.9.1.custom.min.css" type="text/css">
	<script type="text/javascript" src="../js/lib/JQuery/jquery-1.8.2.min.js"></script>
	<script type="text/javascript" src="../js/lib/JQuery/jquery-ui-1.9.1.custom.min.js"></script>
    <script src="../js/lib/OpenLayers-2.11/OpenLayers.js"></script>
	<script type="text/javascript" src="../js/lib/OpenLayers-2.11/lib/OpenLayers/Layer/GoogleTile.js"></script>
	<style type="">
	</style>
    <script type="text/javascript">
    	var dx = 3;
        var dy = 3;
        var px, py;
        var features = [];
        var strategy, clusters;
        
    	var lineLayer,drawControls;
        var proj = 'EPSG:26915';
        var lodLength = 20;
        var resolutions = [];
        var resolution = 156543.033928;
        for (var i = 0; i < lodLength; i++) {
            resolutions.push(resolution);
            resolution /= 2;
        }
        var tileSize = new OpenLayers.Size(256, 256);
        var agsTileOrigin = new OpenLayers.LonLat(-20037508.342787, 20037508.342787);
        var mapExtent = new OpenLayers.Bounds(-20037508.342787, -20037508.342787, 20037508.342787, 20037508.342787);

        var map;
        function init() {
         format = 'image/png';
            map = new OpenLayers.Map('map', {
                maxExtent: mapExtent,
			    displayProjection: new OpenLayers.Projection("EPSG:4326"),
                controls: [
		            new OpenLayers.Control.Navigation(),
		            new OpenLayers.Control.LayerSwitcher(),
		            new OpenLayers.Control.PanZoomBar(),
		            new OpenLayers.Control.MousePosition()
				]
            });
            var baseLayer = new OpenLayers.Layer.GoogleTile('google 影像地图',
				//'http://mt0.google.cn/vt/lyrs=s@118&hl=zh-CN&gl=CN&src=app&x=${x}&y=${y}&z=${z}&s=Galile',
				"http://mt1.google.cn/vt/lyrs=m@189000000&hl=zh-CN&gl=CN&src=app&x=${x}&s=&y=${y}&z=${z}&s=Ga",
				{
                tileOrigin: agsTileOrigin,
                resolutions: resolutions,
                sphericalMercator: true,
                maxExtent: mapExtent,
                isBaseLayer: true,
                type: 'png'
            });
            
            
            map.addLayers([baseLayer]);
			var center=new OpenLayers.LonLat(103.222595,35.70737).transform(map.displayProjection,map.getProjectionObject());
			map.setCenter(center, 4);  //添加平移缩放工具条
			
		   
		   
		   var style = new OpenLayers.Style({
                fontSize: "9pt",
                fontWeight: "bold"
            }, {
                rules: [
                new OpenLayers.Rule({
                    filter: new OpenLayers.Filter.Comparison({      //设置单点时的图标
                        type: OpenLayers.Filter.Comparison.EQUAL_TO,    
                        property: "count",  //获取合并点数
                        value: 1
                    }),
                    symbolizer: {
                        graphicWidth: 25,
                        graphicHeight: 25,
                        labelYOffset: "-10",  //设置显示文字的偏移量
                        label: "${name}",   //获取显示文字
                        externalGraphic: "${img}"  //获取显示图标
                    }
                }),
                 new OpenLayers.Rule({
                     // apply this rule if no others apply
                     elseFilter: true,
                     symbolizer: {
                         pointRadius: "${radius}",  //计算点半径
                         fillColor: "#ffcc66",
                         fillOpacity: 0.8,
                         strokeColor: "#cc6633",
                         strokeWidth: "${width}",
                         labelYOffset: "-8",
                         label: "${count}",  //获取合并点数
                         strokeOpacity: 0.8
                     }
                 })
               ],
                context: {
                    width: function (feature) {
                        return (feature.cluster) ? 2 : 1;
                    },
                    radius: function (feature) {
                        var pix = 2;
                        if (feature.cluster) {
                            pix = Math.min(feature.attributes.count, 7) + 2;
                        }
                        return pix;
                    },
                    count: function (feature) {
                        return feature.attributes.count;
                    },
                    img: function (feature) {
                        return feature.cluster[0].data.img;
                    },
                    name: function (feature) {
                        return feature.cluster[0].data.name;
                    }
                }
            });

        	strategy = new OpenLayers.Strategy.Cluster();

            clusters = new OpenLayers.Layer.Vector("Clusters", {
                strategies: [strategy],
                styleMap: new OpenLayers.StyleMap(style)
            });

          var select = new OpenLayers.Control.SelectFeature(clusters);
		   
		   
		   var ic = "../images/custom/Blue.png";
            for (var i = 0; i < 400; i++) {
                var sHtml = "<tr><td valign=\"top\">test</td><td valign=\"top\">" + i.toString() + "</td></tr>";
                px = Math.random() * (122 - 121 + 0.001) + 121;
                py = Math.random() * (30 - 29 + 0.001) + 29;
                var ll = new OpenLayers.LonLat(px,py).transform(map.displayProjection,map.getProjectionObject());
                features.push(new OpenLayers.Feature.Vector(
                        new OpenLayers.Geometry.Point(ll.lon, ll.lat),
                        {x: ll.lon, y: ll.lat, html: sHtml, img: ic, name: "浙B" + i.toString()}
                 ));
            }
		   
		   	
           map.addControl(select);
           select.activate();
           map.addLayer(clusters);
           strategy.distance = 50;   //设置合并范围
           clusters.removeFeatures(clusters.features);
           clusters.addFeatures(features);
           
           //画popup窗
            clusters.events.on({
                featureselected: function (e) {
                    feature = e.feature;
                    var fHtml = "<table style=\"width:150px;height:100px;\">";
                    for (var i = 0; i < feature.cluster.length; i++) {
                        fHtml += feature.cluster[i].data.html;
                    }
                    fHtml += "</table>";
                    var lonlat = new OpenLayers.LonLat(feature.cluster[0].geometry.x, feature.cluster[0].geometry.y);
                    popup = new OpenLayers.Popup.FramedCloud("featurePopup",
                                                     lonlat,
                                         new OpenLayers.Size(300, 300),
                                       	 fHtml,
                                         null, true, function (e) {

                                             select.unselect(this.feature);
                                         });
                    feature.popup = popup;
                    popup.feature = feature;
                    popup.size = new OpenLayers.Size(300, 300);
                    map.addPopup(popup);
                },
                featureunselected: function (e) {
                    feature = e.feature;
                    if (feature.popup) {
                        popup.feature = null;
                        map.removePopup(feature.popup);
                        feature.popup.destroy();
                        feature.popup = null;
                    }
                }
            });
            
            
        }

 
    </script>
</head>
<body onload="init()">
    <div id="map" style="width: 100%; height: 500px;border :1px solid gray;">
    	
    </div>
</body>
<script>
	 	
	
	$(document).ready(function(){
		function draw() {
            var ic = "Images/Icon/car_yellow_0.png";
            for (var i = 0; i < 400; i++) {
                var sHtml = "<tr><td valign=\"top\">test</td><td valign=\"top\">" + i.toString() + "</td></tr>";
                px = Math.random() * (122 - 121 + 0.001) + 121;
                py = Math.random() * (30 - 29 + 0.001) + 29;
                var ll = new OpenLayers.LonLat(px,py).transform(map.displayProjection,map.getProjectionObject());
                features.push(new OpenLayers.Feature.Vector(
                        new OpenLayers.Geometry.Point(ll.lon, ll.lat), { x: ll.lon, y: ll.lat, html: sHtml, img: ic, name: "浙B" + i.toString() }
                 ));
            }
        }
        
        
	});
	
	
</script>
</html>
